今天要介紹的是Render Functions

先來看一段官網對render function的介紹

Vue recommends using templates to build applications in the vast majority of cases. However, there are situations where we need the full programmatic power of JavaScript. That's where we can use the render function.

在官網中他建議我們在大部分的情況下還是使用template去建構HTML完成我們想要的網頁，但從官網上我們可以知道有些時候我們需要靠很多JavaScript才能完成網頁，而當遇到這種情況時，我們就可以使用render function這個函式去代替template

今天的範例是仿照官網上舉的例子去實作的，從官網中的template寫法可以看出如果沒有在JavaScript上使用render function就需要去做很多if-else的判斷式，去判斷它是h1到h6的哪一個字體大小，判斷它是哪個slot然後去插入它的標籤，但是使用render function我們只需要使用'h' + this.level讓它props進去我們在HTML的level這就會和利用判斷是去判斷h1到h6的效果一樣，所以使用render function很明顯的讓我們在HTML上的程式碼和判斷式減少很多!當然大部分我們還是會使用template，所以Render Functions比較常使用的時機大概是在寫部落格的時候吧!

Demo
github